# Component: State

Utility overlays for loading, placeholders, and interactions

Utility Block

### BEM Anatomy

| Type      | Class Name    | Description                                                                            |
| --------- | ------------- | -------------------------------------------------------------------------------------- |
| ==Block== | `.as-state`   | The flexible container. Centers content both horizontally and vertically.              |
| Modifier  | `--loading`   | Uses a dark color with `0.5` opacity; typically paired with `fa-spin`.                 |
| Modifier  | `--no-image`  | Acts as a placeholder. Provides a light background and subdued icon colors.            |
| Modifier  | `--clickable` | An overlay state for links (e.g., play buttons). Uses white text with reduced opacity. |
| Element   | `__icon`      | The central glyph. Standardized to `2rem` with automatic vertical centering.           |

### Visual Implementation Logic

The `as-state` block is often composed with other architectural classes (like `as-article-item__image`) to take on the dimensions of its parent while providing a consistent internal status layout.

##### Generated HTML (Overlay & Placeholder)

```html
<!-- Interactive Play Overlay -->
<a href="..." class="as-state as-state--clickable">
    <i class="as-state__icon fa-solid fa-circle-play"></i>
</a>

<!-- Empty State / No Image -->
<div class="as-article-item__image as-state as-state--no-image">
    <i class="as-state__icon fa-solid fa-book-open-reader"></i>
</div>
```

##### SCSS

```scss
.as-state {
  display: flex;
  justify-content: center; // Horizontal center

  &__icon {
    font-size: 2rem;
    align-self: center;    // Vertical center
  }

  &--no-image {
    color: var(--bs-dark);
    background-color: var(--bs-light);
    
    i {
      opacity: 0.5;
    }
  }
}
```
